<template>
  <div style="text-align:center;overflow: hidden;background-color: #353535;">
    <divider style="color:#fff">长按保存图片</divider>
    <div style="padding-bottom: 30px;">
    <div id='showBigImg1' v-if="showBig1">
      <div id='inviteQr1'></div>
    </div>
    <div id='showBigImg2' v-if="showBig2">
      <div id='inviteQr2'></div>
    </div>
    <div id='showBigImg3' v-if="showBig3">
      <div id='inviteQr3'></div>
    </div>
    </div>
    <div style="height:100px;width:100%;position: absolute;margin-top: 10px;">
      <ul id="swordPic" style="width: 400px;overflow: hidden;height:100px;">
        <li id="showImg1" style="float:left;height:100px;width:100px;margin-left:10px">
          <div class ="imgBox pb6">
            <div class="longTapBox" id="tapBox">
              <img style="height:100px;width:100px" src="../../assets/home/invite/1_1.jpg" />
              <div class="overlay2" id="overlay">
                <img src="../../assets/me/yes.png"/>
              </div>
            </div>
          </div>
        </li>
        <li id="showImg2" style="float:left;height:100px;width:100px;margin-left:10px">
          <div class ="imgBox pb6">
            <div class="longTapBox" id="tapBox2">
              <img style="height:100px;width:100px" src="../../assets/home/invite/2_2.jpg" />
              <div class="overlay2" id="overlay2">
                <img src="../../assets/me/yes.png"/>
              </div>
            </div>
          </div>
        </li>
        <li id="showImg3" style="float:left;height:100px;width:100px;margin-left:10px">
          <div class ="imgBox pb6">
            <div class="longTapBox" id="tapBox3">
              <img style="height:100px;width:100px" src="../../assets/home/invite/3_3.jpg" />
              <div class="overlay2" id="overlay3">
                <img src="../../assets/me/yes.png"/>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
   </div>
</template>

<script>
import { Qrcode, Divider } from 'vux'
import AlloyFinger from 'alloyfinger'
import { getCustomerId } from '../utils/utils'
import Transform from 'css3transform'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Qrcode,
    Divider
  },
  data () {
    return {
      qrcodeUrl: '',
      qrcodeSize: 80,
      customerId: getCustomerId(),
      showBig1: true,
      showBig2: false,
      showBig3: false
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted () {
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/me/createInviteQrCode', config).then(function (response) {
      console.log(response)
      console.log(response.data.data.length)
      var img = new Image()
      img.src = 'data:image/gif;base64,' + response.data.data.img
      img.setAttribute('style', 'height: 400px;')
      document.getElementById('inviteQr1').appendChild(img)
    }).catch(function (error) {
      console.log(error)
    })

    let swordEle = document.getElementById('swordPic')
    Transform(swordEle)
    var that = this
    var af = new AlloyFinger(swordEle, {
      pressMove: function (evt) {
        console.log('pressMove')
        console.log(evt.deltaX)
        swordEle.translateX += evt.deltaX
        evt.preventDefault()
      }
    })
    let tapBox = document.getElementById('tapBox')
    let overlay = document.getElementById('overlay')

    let tapBox2 = document.getElementById('tapBox2')
    let overlay2 = document.getElementById('overlay2')

    let tapBox3 = document.getElementById('tapBox3')
    let overlay3 = document.getElementById('overlay3')
    that.toggleDomBlk(overlay)
    var af1 = new AlloyFinger(tapBox, {
      tap: function () {
        that.toggleDomBlk(overlay)
        that.toggleDomNone(overlay2)
        that.toggleDomNone(overlay3)
        that.showBig1 = true
        that.showBig2 = false
        that.showBig3 = false
        that.getInviteImg('1', 'inviteQr1')
      }
    })

    var af2 = new AlloyFinger(tapBox2, {
      tap: function () {
        that.toggleDomBlk(overlay2)
        that.toggleDomNone(overlay)
        that.toggleDomNone(overlay3)
        that.showBig1 = false
        that.showBig2 = true
        that.showBig3 = false
        that.getInviteImg('2', 'inviteQr2')
      }
    })

    var af3 = new AlloyFinger(tapBox3, {
      tap: function () {
        that.toggleDomBlk(overlay3)
        that.toggleDomNone(overlay2)
        that.toggleDomNone(overlay)
        that.showBig1 = false
        that.showBig2 = false
        that.showBig3 = true
        that.getInviteImg('3', 'inviteQr3')
      }
    })

    var onTap = function () {
      console.log('ok')
    }
    af.off('tap', onTap)
    af1.off('tap', onTap)
    af2.off('tap', onTap)
    af3.off('tap', onTap)
  },
  methods: {
    getInviteImg (imgNo, domId) {
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'customerId': this.customerId,
          'imgNo': imgNo
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/me/createInviteQrCode', config).then(function (response) {
        console.log(response)
        console.log(response.data.data.length)
        var img = new Image()
        img.src = 'data:image/gif;base64,' + response.data.data.img
        img.setAttribute('style', 'height: 400px;')
        let domDiv = document.getElementById(domId)
        while (domDiv.hasChildNodes()) {
          domDiv.removeChild(domDiv.firstChild)
        }
        domDiv.appendChild(img)
      }).catch(function (error) {
        console.log(error)
      })
    },
    toggleDomNone (dom) {
      var displayValue = window.getComputedStyle(dom, null)['display']
      if (displayValue === 'none') {
      } else {
        dom.style.display = 'none'
      }
    },
    toggleDomBlk (dom) {
      var displayValue = window.getComputedStyle(dom, null)['display']
      if (displayValue === 'none') {
        dom.style.display = 'block'
      } else {
        dom.style.display = 'none'
      }
    }
  }
}
</script>

<style lang="less" scoped>
li {list-style-type:none;}
.overlay2, .overlay {
    background-color: rgba(70, 70, 70, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    display: none;
}
.imgBox {
    margin-bottom: 10px;
    border-bottom: 1px solid #333333;
}
.longTapBox {
    border-radius: 10px;
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    user-drag: none;
    touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.longTapBox img {
    pointer-events: none;
}
.overlay2 img, .overlay img {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 30px;
    left: 30px;
}
.longTapBox img {
    pointer-events: none;
}
</style>
